<template>
    <div class="ai-chat">
        <!-- 顶部工具栏 -->
        <div class="main-toolbar">
            <Toolbar :message-count="props.messages.length" :is-streaming="props.isStreaming">
                <template #actions>
                    <ToolbarActions :message-count="props.messages.length" @clear-chat="clearChat"
                        @show-export-modal="showExportModal" />
                </template>
            </Toolbar>
        </div>
        <!-- 聊天区域 -->
        <div class="chat-area">
            <ChatList :messages="props.messages" :estimatedItemSize="120" :bufferScale="2" :tts-enabled="props.ttsEnabled"
                height="100%" @message-updated="handleMessageUpdated" />
        </div>
        <!-- 输入区域 -->
        <div class="input-area">
            <InputArea v-model="inputMessage" :is-streaming="props.isStreaming" @send-message="sendMessage" />
        </div>
        
        <!-- 导出弹窗 -->
        <ExportModal 
            :visible="showExportModalFlag" 
            :messages="props.messages"
            @close="closeExportModal"
            @export="handleExport" />
    </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import Toolbar from '../Toolbar/index.vue'
import ToolbarActions from '../ToolActions/index.vue'
import ChatList from '../ChatList/index.vue'
import InputArea from '../InputArea/index.vue'
import ExportModal from '../ExportModal/index.vue'
const props = defineProps({
    messages: {
        type: Array,
        default: () => []
    },
    inputMessage: {
        type: String,
        default: ''
    },
    isStreaming: {
        type: Boolean,
        default: false
    },
    ttsEnabled: {
        type: Boolean,
        default: true
    }
})
const emit = defineEmits(['sendMessage', 'clearChat', 'exportChat', 'toggleTTS', 'handleMessageUpdated', 'update:inputMessage'])

// 导出弹窗状态
const showExportModalFlag = ref(false)

// 处理inputMessage的双向绑定
const inputMessage = computed({
    get: () => props.inputMessage,
    set: (value) => emit('update:inputMessage', value)
})

const clearChat = () => {
    emit('clearChat')
}

const showExportModal = () => {
    showExportModalFlag.value = true
}

const closeExportModal = () => {
    showExportModalFlag.value = false
}

const handleExport = (messages, exportData) => {
    emit('exportChat', messages, exportData)
    closeExportModal()
}

const sendMessage = () => {
    emit('sendMessage')
}
const toggleTTS = () => {
    emit('toggleTTS')
}
const handleMessageUpdated = (messageId) => {
    emit('handleMessageUpdated', messageId)
}
</script>

<style scoped>
@import './index.css';
</style>